<template>
  <div class="box">
    <!-- 因为是vue文件  所以如果要绑定动态属性 就要加v-bind 
    我自己没想到这个 这个是在网上找的 -->
    <img :src="dogImgUrl" alt="" />
    <p>{{ dogName }}</p>
  </div>
</template>

<script>
export default {
  props: ['dogImgUrl', 'dogName', 'index'],
}
</script>

<style>
.box {
  width: auto;
  text-align: center;
  border: 2px solid black;
  float: left;
}
.box img {
  width: 100%;
  height: 200px;
}

/* .box {
  height: 300px;
  width: 300px;
  margin-bottom: 50px;
}
.box img {
  border: 2px solid black;
  width: 100%;
  height: 300px;
}
.box p {
  height: 20px;
  width: auto;
  text-align: center;
  line-height: 20px;
} */
</style>
